<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isAppBtn="false"></HeadCustom>
		<view class="wrap">
			<view v-if="fromData.auditStatus == 2" class="prompt fboxRow Ystart lh38 font26 color-E8CDA7"> <u-icon
					name="error-circle" color="#E8CDA7"></u-icon>
				<view class="ml10">
					温馨提示：您发布的招聘信息，平台审核未通过。原因：{{fromData.auditRemark}}
				</view>
			</view>
			<view class="title font46 font-weight">{{id ? '编辑招聘': '发布招聘'}}</view>
			<view class="card-wrap">
				<view class="card-item fboxRow Ycenter">
					<view class="tit font26 color-BF8355">招聘类型</view>
					<view class="flex1 fboxRow Ycenter">
						<view v-if="id" class="ml24 font34 ">
							{{fromData.jobType == 1 ? '社会招聘': '校园招聘'}}
						</view>
						<template v-else>
							<view class="fboxRow Ycenter radio-group">
								<view class="radio-item fboxRow Ycenter" @tap="radioTap(1)">
									<text class="radio bwfont fboxRow Ycenter Xcenter border" :class="{'bw-wancheng font34': fromData.jobType == 1 }"></text>
									社会招聘
								</view>
								<view class="radio-item fboxRow Ycenter" @tap="radioTap(2)">
									<text class="radio bwfont fboxRow Ycenter Xcenter border" :class="{'bw-wancheng font34': fromData.jobType == 2 }"></text>
									校园招聘
								</view>
							</view>
							<!-- <u-radio-group v-model="fromData.jobType" placement="column" labelSize="28rpx">
								<view class="fboxRow Ycenter">
									<view style="width: 80rpx;"> </view>
									<u-radio label="社会招聘" labelSize="28rpx" size="24rpx" :name="1" :labelColor="fromData.jobType == 1 ? '#E8CDA7': '#98979C'" activeColor="#E8CDA7"
										inactiveColor="#1A1D25"></u-radio>
									<view style="width: 40rpx;"> </view>
									<u-radio label="校园招聘" labelSize="28rpx" size="24rpx" :name="2" :labelColor="fromData.jobType == 2 ? '#E8CDA7': '#98979C'" activeColor="#E8CDA7"
										inactiveColor="#1A1D25"></u-radio>
								</view>
							</u-radio-group> -->
						</template>
					</view>
				</view>
				<view class="line"></view>
				<view class="card-item" v-for="(item, index) in pulishList" :key="index">
					<view class="tit font26 color-BF8355 flex1">{{item.title}}</view>
					<view class="mt16" v-if="item.type== 'input' || (item.key=='workAddress' && fromData[item.key]) ">
						<u--input :placeholder="item.placeholder" border="none" fontSize="34rpx" clearable v-model="fromData[item.key]" placeholderStyle="border:none;" placeholderClass="inputPlaceholder"></u--input>
					</view>
					<view v-else class="con mt20 lh50 fboxRow Ycenter" @click="itemTap(item)">
						<view class="flex1 font34 font-ell1">
							<text v-if="String(fromData[item.key])">
								<template v-if="item.key=='salaryMin'">
									{{fromData.salaryMin == 0 ? '面议' : fromData.salaryMin}}
									<template v-if="fromData.salaryMin !=0">
										- {{fromData.salaryMax}}
									</template>
								</template>
								<template v-else>
									<template
										v-if="item.key == 'minEducation'">{{gainData(fromData[item.key], 'educationList').label}}</template>
									<template
										v-else-if="item.key == 'workExperience'">{{gainData(fromData[item.key], 'workExperience').label}}</template>
									<template v-else-if="item.key == 'industryList'">
										{{fromData.industryList && fromData.industryList.toString()}}
									</template>
									<template v-else>{{fromData[item.key]}}</template>
								</template>
							</text>
							<text v-else class="color-6B707C">{{item.placeholder}}</text>
						</view>
						<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
					</view>
					<template v-if="item.key == 'jobDesc'">
						<Tags :list="fromData.jobKeywordList" />
					</template>
					<view class="line"></view>
				</view>
				<view class="tips font22 color-6B707C">
					注：职位名称、职位类型和工作城市发布后不可修改 <br />
					发布职位即表示同意遵守 <text class="color-E8CDA7" @click="viewDetail">《本无职位信息发布规范》</text>
				</view>
			</view>
		</view>
		<PickerBlack :isShow.sync="isWorkExperience" :list="workExperience" @confirm="pickerWorkExperience" />
		<PickerBlack :isShow.sync="isEducation" :list="educationList" @confirm="pickerEducation" />
		<PickerBlack type="salary" :isShow.sync="isSalary" @confirm="pickerSalary" />
		<ModelPublic ref="modelRef" content="您确定要删除此招聘？" @confirm="delJob" />
	<!-- 	<view class="fixed-space"></view>
		<view class="fixed-btn fboxRow Ycenter Xcenter bg-1A1D25">
			<template v-if="id">
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 bg-gray-btn" @click="delTap">删除</view>
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">提交</view>
			</template>
			<view v-else class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">保存</view>
		</view>
		 -->
		<BottomFixed>
			<view class="btn-group-inner flex1 fboxRow Ycenter Xcenter">
				<template v-if="id">
					<view class="btn flex1 fboxRow Ycenter Xcenter font30 bg-gray-btn" @click="delTap">删除</view>
					<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">提交</view>
				</template>
				<view v-else class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">保存</view>
			</view>
		</BottomFixed>
	</view>
</template>

<script>
	import {
		jobAddOrEdit,
		postJobDelete
	} from '@/api/recruit.js';
	import Tags from '../components/tags.vue';
	import {
		gainData
	} from '../common/config.js';
	import PickerBlack from '../components/picker-black.vue';
	import ModelPublic from '@/components/model-public/index.vue';
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
	export default {
		components: {
			Tags,
			PickerBlack,
			ModelPublic,
			BottomFixed
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				isWorkExperience: false,
				workExperience: [gainData('list', 'workExperience')],
				isEducation: false,
				educationList: [gainData('list', 'educationList')],
				isSalary: false,
				isDel: false,
				gainData: gainData,
				id: '',
				fromData: {
					"companyId": getApp().globalData.companyId,
					// "id": "",
					"industryList": [],
					"jobDesc": "",
					"jobKeywordList": [],
					"jobName": "",
					"jobType": 1,
					"latitude": "", // "29.609138"
					"longitude": "", // "106.382035"
					"minEducation": "",
					"salaryMax": "",
					"salaryMin": "",
					"workAddress": "", // 重庆市沙坪坝区西园北街6号
					positionType: '',
					"workExperience": ""
				},
				pulishList: [{
						title: '职位名称',
						placeholder: '请填写职位名称',
						key: 'jobName',
						type: 'input'
					},
					{
						title: '职位描述',
						placeholder: '介绍工作内容、职位要求、加分项',
						key: 'jobDesc', // jobKeywordList
						type: 'arrow',
					},
					{
						title: '职位类型',
						placeholder: '请选择职位类型',
						key: 'positionType',
						type: 'arrow'
					},
					{
						title: '经验要求',
						placeholder: '请选择经验要求',
						key: 'workExperience',
						type: 'arrow'
					},
					{
						title: '最低学历',
						placeholder: '请选择学历',
						key: 'minEducation',
						type: 'arrow'
					},
					{
						title: '薪资范围',
						placeholder: '请选择薪资要求',
						key: 'salaryMin',
						type: 'arrow'
					},
					{
						title: '工作地址',
						placeholder: '请填写工作地点',
						key: 'workAddress',
						type: 'arrow'
					},
					{
						title: '行业要求',
						placeholder: '请选择行业',
						key: 'industryList',
						type: 'arrow'
					},
				]
			}
		},
		onLoad(option) {
			if (option && option.id) {
				this.id = option.id
			}
			if (option && option.companyId) {
				this.fromData.companyId = option.companyId
			}
		},
		onShow() {
			this.getInit()
		},
		methods: {
			viewDetail() {
				this.$pageTo('/about/index?settingCode=DIGITAL_WORKPLACE_PROTOCOL');
			},
			getInit() {
				const recruitmentTemp = getApp().globalData.recruitmentTemp
				console.log(recruitmentTemp)
				// if (recruitmentTemp.hasOwnProperty('workAddress') && this.id) {
				if (recruitmentTemp.hasOwnProperty('workAddress')) {
					this.fromData = recruitmentTemp
				}
			},
			radioTap(type){
				this.fromData.jobType = type
			},
			itemTap(e) {
				getApp().globalData.recruitmentTemp = this.fromData
				// workExperience
				if (e.key == 'jobDesc') {
					this.$pageTo('/recruit/user/vita-textarea?pageType=jobDesc&index=' + this.index)
				} else if (e.key == 'workExperience') {
					this.isWorkExperience = true
				} else if (e.key == 'minEducation') {
					this.isEducation = true
				} else if (e.key == 'salaryMin') {
					this.isSalary = true
				} else if (e.key == 'industryList') {
					this.$pageTo('/recruit/common/industry?isCheckbox=1&&pageType=publishRecruitment')
				} else if (e.key == 'positionType') {
					this.$pageTo('/recruit/common/position?isCheckbox=0&pageType=publishRecruitment')
				} else if (e.key == 'workAddress') {
					// #ifdef H5
						const pramas = this.fromData.latitude ? `?lat=${this.fromData.latitude}&lng=${this.fromData.longitude}` : ''
						this.$pageTo('/recruit/enterprise/map' + pramas)
					// #endif
					// #ifdef MP
						const pramas = this.fromData.latitude ? `?lat=${this.fromData.latitude}&lng=${this.fromData.longitude}` : ''
						this.$pageTo('/recruit/enterprise/map' + pramas)
						// if(this.fromData.latitude){
						// 	uni.chooseLocation({
						// 		latitude: this.fromData.latitude,
						// 		longitude: this.fromData.longitude,
						// 		success: (res)=> {
						// 			console.log('位置名称：' + res.name);
						// 			console.log('详细地址：' + res.address);
						// 			console.log('纬度：' + res.latitude);
						// 			console.log('经度：' + res.longitude);
						// 			this.fromData.latitude = res.latitude
						// 			this.fromData.longitude = res.longitude
						// 			this.fromData.workAddress = res.address
						// 			this.fromData.workArea = res.name
						// 		}
						// 	});
						// }else{
						// 	uni.chooseLocation({
						// 		success: (res)=> {
						// 			console.log('位置名称：' + res.name);
						// 			console.log('详细地址：' + res.address);
						// 			console.log('纬度：' + res.latitude);
						// 			console.log('经度：' + res.longitude);
						// 			this.fromData.latitude = res.latitude
						// 			this.fromData.longitude = res.longitude
						// 			this.fromData.workAddress = res.address
						// 			this.fromData.workArea = res.name
						// 		}
						// 	});
						// }
					// #endif
				}
			},
			save() {
				if (getApp().globalData.companyInfo.authStatus == 1) {
					jobAddOrEdit(this.fromData).then(res => {
						if (res.data) {
							this.fromData.auditStatus = 0
							getApp().globalData.recruitmentTemp = this.fromData
							this.$pageTo('/recruit/enterprise/process', 'redirectTo')
							// uni.navigateBack({
							// 	delta: 1
							// })
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '你的企业还未认证，请先认证后再发布招聘信息！'
					})
				}
			},
			delTap(){
				this.$refs.modelRef.show = true
			},
			delJob() {
				postJobDelete({
					id: this.fromData.id
				}).then(res => {
					if (res.data) {
						uni.navigateBack({
							delta: 2
						})
					}
				})
			},
			pickerWorkExperience(e) {
				this.isWorkExperience = false
				this.fromData.workExperience = e.value[0].value
			},
			pickerEducation(e) {
				this.isEducation = false
				this.fromData.minEducation = e.value[0].value
			},
			pickerSalary(e) {
				this.isSalary = false
				if (e.value[0] == '面议') {
					this.fromData.salaryMin = 0
					this.fromData.salaryMax = 0
				} else {
					this.fromData.salaryMin = e.value[0]
					this.fromData.salaryMax = e.value[1]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
	}

	.prompt {
		margin-bottom: 24rpx;
		padding: 24rpx 28rpx;
		background: rgba(232, 205, 167, 0.1);
		border-radius: 12rpx;
	}
	.title { line-height: 66rpx; color:var(--contourButtonTextColor) }
	.tips { line-height: 32rpx; color: var(--contentFontLightColor) }
	.tit{color:var(--contentFontDarkColor);}
	.wrap {
		padding: 40rpx;
	}

	.u-textarea {
		background-color: var(--viewBgColor);
	}

	.uni-input {
		padding: 0 32rpx;
		width: 542rpx;
		height: 88rpx;
		background: var(--viewBgColor);
		border-radius: 12rpx;
	}

	.card-wrap {
		padding-top: 64rpx;
	}
	.radio-group{margin-left: 40rpx;}
	.radio-group .radio-item{margin-right: 20rpx;}
	.radio-group .bw-wancheng{color: var(--contourButtonTextColor);
	// background: linear-gradient(360deg, #AD7B54 0%, #D8A37A 100%);
 //    background-clip: text;
 //    -webkit-background-clip: text;
 //    -webkit-text-fill-color: transparent;
	}
	.radio-group .radio{margin-right: 10rpx; width: 30rpx;height: 30rpx;border-radius: 50%; border: 1px solid var(--buttonOutlineOneColor);}
	.radio-group .radio.bw-wancheng{}
	.line {
		margin: 40rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}


	/deep/.u-popup__content {
		background-color: var(--darkViewBgColor);
	}

	/deep/.u-modal__title {
		color: var(--titleFontColor)
	}

	/deep/.u-modal__content__text {
		color: var(--titleFontColor)
	}

	/deep/.u-line {
		display: none;
	}

	/deep/.u-modal__button-group {
		border-top: 1rpx solid var(--backgroundDivisionColor);
	}

	.btn-group-inner .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}

	.btn-group-inner .btn+.btn {
		margin-left: 24rpx;
	}
</style>